{% load staticfiles %}
{% include "header.html" %}



<div class='hot container'>
    <div class="hot-row row">
        <div class="hot-left col-lg-6 col-xs-12 c49">
            <div class="img-item">
                <div class="shade">
                    <div class="shade-box">
                        <a class="hot-title">{{ hot_big.title }}</a>
                        <a class="hot-auther">{{ hot_big.auther.username }}</a>
                        <a class="hot-tag">二次元 偶像 图包</a>
                    </div>
                </div>
                <a href="/article/{{ hot_big.id }}/">
                    <img src="{{ hot_big.get_first_image }}" class="loaded">
                </a>
            </div>
        </div>
        <div class="hot-right col-lg-6 col-xs-12 c49">
            {% for article in hot_smalls %}
                <div class="hot-box">
                    <div class="img-item">
                        <div class="shade">
                            <div class="shade-box">
                                <a class="hot-title">{{ article.title }}</a>
                                <a class="hot-auther">{{ article.auther.username }}</a>
                                <a class="hot-tag">二次元 偶像 图包</a>
                            </div>
                        </div>
                        <a href="/article/{{ article.id }}/">
                            <img src="{{ article.get_first_image }}" class="loaded"></a>
                    </div>
                </div>
            {% endfor %}


        </div>
    </div>
</div>
<div id='image-list' class='container de-container'>

</div>
<div id="more-card" style="text-align: center;height: 40px;font-size: 16px">正在加载更多</div>

<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript">
    (function () {
        $('.nav__trigger').on('click', function (e) {
            e.preventDefault();
            $('.nav').toggleClass('nav-active-x');
            $('#nav_trigger_parent').toggleClass('nav-trigger-active')
        });
    }())
</script>

<script type="text/javascript">
    (function () {
        var pc = 0;
        var norunning = 1;
        var fuck = function () {
            if (norunning == 1) {
                norunning = 0;
                var d1 = document.getElementById('image-list');
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
                        if(xmlhttp.responseText != "fail") {
                            d1.insertAdjacentHTML('beforeend', xmlhttp.responseText);
                            pc = pc + 1;
                        }else{
                            $('#more-card').text('已经到底了^ ^')
                        }
                        norunning = 1;
                    }
                };
                xmlhttp.open("GET", "/images/hotpage?page=" + pc, true);
                xmlhttp.send();
            }
        }
        var winH = $(window).height()
        var scrollHander = function(){
            var pageH = $(document.body).height();
            var scrollT = $(window).scrollTop();
            var aa = (pageH - winH - scrollT-60)/winH;
            if(aa < 0.08){
                fuck()
            }
        }
        fuck()

        $(window).scroll(scrollHander)
    }())
</script>

</body>
</html>
